<template>
    <div>
      <div :[name]="value">v-bind动态绑定属性名称和值</div>
      <button @click="toggle">切换控制属性</button>
      <br />
      <h2>v-bind动态绑定一个对象</h2>
      <div v-bind="info">v-bind动态绑定一个对象</div>
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'binddt',
    data() {
      return {
        name: 'username',
        value: '张三',
        info: {
          name: 'zhangsan',
          age: 18,
          height: 1.88
        }
      }
    },
    methods: {
      toggle() {
        this.name = this.name === 'username' ? 'age' : 'username'
        console.log('this.name: ', this.name)
      }
    }
  }
  </script> -->
  
  <script setup>
  defineOptions({
    name: 'binddt'
  })
  import { ref } from 'vue'
  const name = ref('username')
  const value = ref('张三')
  const info = ref({
    name: 'zhangsan',
    age: 18,
    height: 1.88
  })
  const toggle = () => {
    name.value = name.value === 'username' ? 'age' : 'username'
    console.log('this.name: ', name.value)
  }
  </script>
  <style lang="scss" scoped></style>
  